<template>
	<LivePlayer
		:hide-big-play-button="true"
		:id="id"
		:video-url="videoUrl"
		:video-title="videoTitle"
		:aspect="aspect"
		class="c-player"
		custom-buttons="关闭:vjs-icon-cancel"
		@fullscreen ="fullScreen"
	>
		<Joystick />
	</LivePlayer>
</template>
<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue'
import { Joystick } from './Controls/module'
import { uuid } from 'vue-uuid'
import LivePlayer from '@liveqing/liveplayer-v3'
const id = ref(uuid.v1())
const props = defineProps({
	videoUrl: {
		type: String,
		default: ''
	},
	videoTitle: {
		type: String,
		default: ''
	},
	aspect: {
		type: String,
		default: '16:9'
	},
	index: {
		type: Number,
		default: 0
	}
})

const emits = defineEmits(['close'])

const close = (event: any) => {
	if (event.target.className === 'vjs-icon-cancel') {
		emits('close', props.index)
		// 阻止事件冒泡
		event.stopPropagation()
	}
}

// 播放器全屏
const fullScreen = (isScreen: boolean) => {
	console.log('fullscreen', isScreen);
}
const init = () => {
	const player = document.getElementById(id.value)
	if (player) {
		player.addEventListener('click', close)
	}
}

const destroyed = () => {
	const player = document.getElementById(id.value)
	if (player) {
		player.removeEventListener('click', close)
	}
}
onMounted(() => {
	init()
})
onBeforeUnmount(() => {
	destroyed()
})
</script>

<style lang="scss" scoped>
.c-player {
	width: 100%;
	height: 100%;
}
:deep(.video-js) {
	.vjs-control {
		width: 3em;
		i::before {
			font-size: 1.4em;
			line-height: 1.87;
		}
	}
}
:deep(.video-wrapper) {
	position: relative;
	height: 100%;
	padding-bottom: 0 !important;
}
</style>
